<template>
    <el-aside :width="settings.width">
        <el-scrollbar>
            <el-menu :default-openeds="['3']" 
                    :collapse="settings.collapse" active-text-color="#F8FAFB"
                    background-color="#1A1C1E" text-color="#74767A" router="true">
                <!-- <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>首页</span>
                    </template>
                    <el-menu-item @click="changePage('/#/login')">登录</el-menu-item>
                    <el-menu-item @click="changePage('/#/register')">注册</el-menu-item>
                </el-sub-menu> -->
                <el-menu-item index="1" @click="toHome">
                    <el-icon><House /></el-icon>
                    <span>首页</span>
                  </el-menu-item>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Menu />
                        </el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item @click="changePage('/#/user/list')">用户列表</el-menu-item>
                    <el-menu-item @click="changePage('/#/user/add')">新增用户</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <Message />
                        </el-icon>
                        <span>车辆管理</span>
                    </template>
                    <el-menu-item @click="changePage('/#/car/list')">车辆列表</el-menu-item>
                    <el-menu-item @click="changePage('/#/car/add')">车辆入库</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <Files />
                        </el-icon>
                        <span>检查单管理</span>
                    </template>
                    <el-menu-item @click="changePage('/#/check/list')">检查单列表</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>订单管理</span>
                    </template>
                    <el-menu-item @click="changePage('/#/order/list')">订单列表</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>

<script setup>
import router from '@/router';
import { defineEmits } from 'vue';
import { ref } from 'vue'

const settings = defineProps({
  collapse: Boolean,
  width: String
})

const iconColor = ref('color:#F8FAFB')

// emits 传递事件 —— 将页面更改的信息发送给主页面
const emit = defineEmits(['changePage']);
const changePage = (newURL) => {
  emit('changePage', newURL);
};
const toHome = () => {
  router.push({ path: '/' })
}

</script>

<style scoped>
    .el-aside {
    height: 100vh;
    overflow: hidden;
    box-shadow: var(--el-box-shadow-lighter);
    }

    .el-scrollbar {
    height: 100vh;
    overflow: hidden;
    background-color: #1A1C1E;
    }

    .el-menu {

    border-right: none;
    }
</style>
